<template>
	<div class="con-right">
		<ul class="right-total flex flex-between">
			<li>
				<p>15204<span>件</span></p>
				<p>报警总数</p>
			</li>
			<li>
				<p>30<span>件</span></p>
				<p>今日报警</p>
			</li>
		</ul>
		<checked-title :title="dataTitle"></checked-title>
		<div class="right_box flex flex-direction flex-between">
			<div class="right-top flex">
				<div class="monitor1">
					<p class="same-title">工地监控</p>
					<p class="same-title1">今日冲洗报警<span>2</span><span>个</span></p>
					<div class="monitor-ech">
						<div id="echarts4" ref="echarts4" style="width:100%;height:100%;"></div>
					</div>
				</div>
				<div class="monitor1">
					<p class="same-title">执法记录仪</p>
					<p class="same-title1">今日执法次数<span>10</span><span>次</span></p>
					<div class="monitor-ech">
						<div id="echarts5" ref="echarts5" style="width:100%;height:100%;"></div>
					</div>
				</div>
			</div>
			<div class="right-middle">
				<div class="flex flex-between align-items-center">
					<p class="same-title">扬尘监控</p>
					<p class="same-title1">今日扬尘报警 <span>3</span><span>个</span></p>
				</div>
				<div class="monitor2 flex flex-between">
					<div class="monitor-ech1">
						<div id="echarts6" ref="echarts6" style="width:100%;height:100%;"></div>
					</div>
					<div class="monitor-box relative">
						<div class="zs zs1 absolute"></div>
						<div class="zs zs2 absolute"></div>
						<div class="zs zs3 absolute"></div>
						<div class="zs zs4 absolute"></div>
						<p>{{ dataYc.name || '——' }}</p>
						<ul class="flex flex-between flex-wrap">
							<li>
								<!--  <span>um/m³</span> -->
								<p>{{ dataYc.pm25 || '——' }}</p>
								<p>pm2.5</p>
							</li>
							<li>
								<!-- <span>um/m³</span> -->
								<p>{{ dataYc.pm10 || '——' }} </p>
								<p>pm10</p>
							</li>
							<li>
								<!--  <span>um/m³</span> -->
								<p>{{ dataYc.tsp || '——' }}</p>
								<p>TSP</p>
							</li>
							<li>
								<p>{{ dataYc.db || '——' }}</p>
								<p>噪声</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="right-btm">
				<div class="flex flex-between align-items-center">
					<p class="same-title">占道监控</p>
					<p class="same-title1">违规事件报警 <span>15</span><span>个</span></p>
				</div>
				<!-- <div class="same-title2 flex flex-end">
          <div class="same-con">较昨日上涨 <span>10%</span></div>
        </div> -->
				<div class="monitor3 flex flex-between">
					<div class="monitor-ech2">
						<div id="echarts7" ref="echarts7" style="width:100%;height:100%;"></div>
					</div>
					<div class="monitor-box1">
						<p><img src="../../assets/images/content/gaofa.png" alt="">高发地点</p>
						<ul>
							<li class="flex flex-between align-items-center relative" v-for="(item, index) in wgList"
								:key="index" v-if="index < 3">
								<div class="zs zs1 absolute"></div>
								<div class="zs zs2 absolute"></div>
								<div class="zs zs3 absolute"></div>
								<div class="zs zs4 absolute"></div>
								<p>{{ item.name }}</p>
								<p><span>{{ item.count }}</span>起</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
import axios from "axios";
export default {
	data() {
		return {
			dataTitle: "监控数据",
			dataYc: {
				name: '',
				pm25: '',
				pm10: '',
				tsp: '',
				db: ''
			},
			dataZdjk: [],
			wgList: [],
		};
	},
	created() {
		this.getYc()
		this.getZd()
		this.getWg()
	},
	mounted() {
		this.$nextTick(() => {
			this.echarts1();
		})
	},
	methods: {
		// 工地监控-执法记录仪-扬尘监控-图表
		echarts1() {
			var data = [{
				name: "在线",
				y: 38,
				h: 20
			},
			{
				name: "离线",
				y: 0,
				h: 10
			},
			];
			var data1 = [{
				name: "在线",
				y: 51,
				h: 20
			},
			{
				name: "离线",
				y: 9,
				h: 10
			},
			];
			var data2 = [{
				name: "在线",
				y: 102,
				h: 20
			},
			{
				name: "离线",
				y: 6,
				h: 10
			},
			];
			// this.setOptonHeight()
			// 工地监控
			var option4 = {
				title: {
					text: "",
				},
				legend: {
					// layout: "vertical",
					floating: "true",
					// align: "right", //程度标的目标地位
					verticalAlign: "bottom", //垂直标的目标地位
					x: -20, //间隔x轴的间隔
					y: 20, //间隔Y轴的间隔
					// icon: "rect",
					data: ["在线", "离线"],
					itemDistance: 10,//距离
					symbolWidth: 15,  //设置为正方形
					symbolHeight: 12,
					symbolRadius: 0,
					itemStyle: {
						color: "#fff",
						fontSize: 12,
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + "个";
					},
				},
				credits: {
					enabled: false, // 禁用版权信息
				},
				colors: [
					{
						radialGradient: {
							cx: 0.2,
							cy: 0.7,
							r: 1
						},
						stops: [
							[0, 'rgba(1, 180, 255, 1)'],
							[1, 'rgba(3, 54, 255, 1)']
						]
					}, {
						radialGradient: {
							cx: 0.2,
							cy: 0.7,
							r: 1
						},
						stops: [
							[0, 'rgba(252, 255, 3, 1)'],
							[1, 'rgba(255, 198, 1, 1)']
						]
					}
				],
				chart: {
					type: "pie", //饼图
					backgroundColor: "rgba(0,0,0,0)",
					showInLegend: true,
					options3d: {
						enabled: true, //使用3d功能
						alpha: 60, //延y轴向内的倾斜角度
						// beta: 20
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						// cursor: "pointer", //鼠标指针
						showInLegend: true,
						depth: 20, //饼图的厚度
						dataLabels: {
							enabled: false, //是否显示饼图的线形tip
						},
					},
				},
				series: [{
					type: "pie",
					name: "", //统一的前置词,非必须
					showInLegend: true,
					clockWise: true,
					center: ["35%", "20%"],
					// data: [
					//   { name: "在线", y: 24 },
					//   { name: "离线", y: 34 }
					// ]
					data: data,
				},],
			};
			var chart = Highcharts.chart("echarts4", option4);
			// 执法记录仪
			var option5 = {
				title: {
					text: "",
				},
				legend: {
					// layout: "vertical",
					floating: "true",
					// align: "right", //程度标的目标地位
					verticalAlign: "bottom", //垂直标的目标地位
					x: -20, //间隔x轴的间隔
					y: 20, //间隔Y轴的间隔
					itemDistance: 10,//距离
					symbolWidth: 15,  //设置为正方形
					symbolHeight: 12,
					symbolRadius: 0,
					data: ["在线", "离线"],
					itemStyle: {
						color: "#fff",
						fontSize: 12,
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + "个";
					},
				},
				credits: {
					enabled: false, // 禁用版权信息
				},
				colors: [
					{
						radialGradient: {
							cx: 0.2,
							cy: 0.7,
							r: 1
						},
						stops: [
							[0, 'rgba(3, 255, 216, 1)'],
							[1, 'rgba(1, 180, 255, 1)']
						]
					}, {
						radialGradient: {
							cx: 0.2,
							cy: 0.7,
							r: 1
						},
						stops: [
							[0, 'rgba(1, 180, 255, 1)'],
							[1, 'rgba(3, 54, 255, 1)']
						]
					}
				],
				chart: {
					type: "pie", //饼图
					backgroundColor: "rgba(0,0,0,0)",
					showInLegend: true,
					options3d: {
						enabled: true, //使用3d功能
						alpha: 60, //延y轴向内的倾斜角度
						// beta: 20
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						// cursor: "pointer", //鼠标指针
						depth: 20, //饼图的厚度
						dataLabels: {
							enabled: false, //是否显示饼图的线形tip
						},
					},
				},
				series: [{
					type: "pie",
					name: "", //统一的前置词,非必须
					showInLegend: true,
					clockWise: true,
					center: ["35%", "20%"],
					// data: [
					//   { name: "在线", y: 24 },
					//   { name: "离线", y: 34 }
					// ]
					data: data1,
				},],
			};
			var chart1 = Highcharts.chart("echarts5", option5);
			// 扬尘监控
			var chart2 = Highcharts.chart("echarts6", {
				chart: {
					type: "pie",
					backgroundColor: "transparent",
					options3d: {
						enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
						alpha: 60, //图表视图旋转角度
					},
				},
				title: {
					text: "",
				},
				legend: {
					// layout: "vertical",
					floating: "true",
					// align: 'center', //程度标的目标地位
					verticalAlign: 'bottom', //垂直标的目标地位
					x: -20, //间隔x轴的间隔
					y: 22, //间隔Y轴的间隔
					data: ["在线", "离线"],
					itemStyle: {
						color: "#fff",
						fontSize: 12,
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + "个";
					},
				},
				credits: {
					enabled: false, // 禁用版权信息
				},
				tooltip: {
					formatter: function () {
						return (
							" <b> " +
							this.point.name +
							" </b>: " +
							Highcharts.numberFormat(this.percentage, 1) +
							" %   " +
							Highcharts.numberFormat(this.y, 0, " , ")
						);
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						// cursor: "pointer", //鼠标指针
						innerSize: 40,
						depth: 60, //饼图的厚度
						dataLabels: {
							enabled: false, //是否显示饼图的线形tip
						},
					},
				},
				colors: ["rgba(227, 21, 234, 0.45)", "rgba(248, 181, 81, 0.4)"],
				series: [{
					name: "工单类型占比",
					showInLegend: true,
					clockWise: true,
					center: ["45%", "15%"],
					data: data2,
				},],
			});
		},
		// 扬尘监控-右侧数据接口
		getYc() {
			// https://szcs.tyzhcs.cn
			var api = "https://szcs.tyzhcs.cn/api/worksite/data/monitorZHGL"
			axios({
				method: "get",
				url: api,
				headers: {
					'X-Requested-With': 'XMLHttpRequest'
				},

			}).then(res => {
				var datas = res.data.data
				this.dataYc.name = datas.siteName
				this.dataYc.pm25 = datas.baseData.pm25 || 0
				this.dataYc.pm10 = datas.baseData.pm10 || 0
				this.dataYc.tsp = datas.baseData.tsp || 0
				this.dataYc.db = datas.baseData.noise || 0
			})
		},
		// ------------------占道监控----------
		// 占道监控-图标
		echartZd() {
			var chart3 = Highcharts.chart("echarts7", {
				chart: {
					type: "pie",
					backgroundColor: "rgba(0,0,0,0)",
					options3d: {
						enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
						alpha: 60, //图表视图旋转角度
					},

				},
				title: {
					text: "",
				},
				legend: {
					// layout: "hor",
					floating: "true",
					// align: "right", //程度标的目标地位
					verticalAlign: "bottom", //垂直标的目标地位
					x: -20, //间隔x轴的间隔
					y: 22, //间隔Y轴的间隔
					data: ["在线", "离线"],
					itemStyle: {
						color: "#fff",
						fontSize: 12,
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + "个";
					},
				},
				credits: {
					enabled: false, // 禁用版权信息
				},
				tooltip: {
					formatter: function () {
						return (
							" <b> " +
							this.point.name +
							" </b>: " +
							Highcharts.numberFormat(this.percentage, 1) +
							" %   " +
							Highcharts.numberFormat(this.y, 0, " , ")
						);
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						// cursor: "pointer", //鼠标指针
						innerSize: 40,
						depth: 60, //饼图的厚度
						dataLabels: {
							enabled: false, //是否显示饼图的线形tip
						},
					},
				},
				colors: ["rgba(0, 225, 239, 0.45)", "rgba(248, 181, 81, 0.4)"],
				series: [{
					name: "工单类型占比",
					showInLegend: true,
					clockWise: true,
					center: ["45%", "15%"],
					data: this.dataZdjk,
				},],
			});
		},
		// 占道监控-左侧图表接口
		getZd() {
			var api = "https://szcs.tyzhcs.cn/api/lead/occupy/index"
			axios({
				method: "post",
				url: api,
				headers: {
					'X-Requested-With': 'XMLHttpRequest'
				},
			}).then(res => {
				var datas = res.data.data
				this.dataZdjk.push(['在线', Number(datas.occupyVideoMonitor.onLine)])
				this.dataZdjk.push(['离线', Number(datas.occupyVideoMonitor.offLine)])
				this.echartZd();
			})
		},
		// 占道监控-右侧高发地点接口
		getWg() {
			var api = "https://szcs.tyzhcs.cn/api/lead/occupy/runk"
			axios({
				method: "post",
				url: api,
				headers: {
					'X-Requested-With': 'XMLHttpRequest'
				},
			}).then(res => {
				var datas = res.data.data
				this.wgList = datas
			})
		}
	},
};
</script>
<style lang="less" scoped>
.con-right {
	// flex: 1;
	height: 100%;

	background-size: 100% 100%;
	// margin-left: 10px;
	padding: 25px;


	.right-total {
		margin-bottom: 20px;

		li {
			width: 46%;
			height: 81px;
			background: url("../../assets/images/content/libj.png") no-repeat;
			background-size: 100% 100%;
			padding: 10px 0;

			p:nth-child(1) {
				font-size: 28px;
				font-family: Microsoft YaHei;
				color: #229eff;
				text-align: center;

				span {
					font-size: 14px;
					color: #229eff;
					margin-left: 10px;
				}
			}

			p:nth-child(2) {
				text-align: center;
				font-size: 12px;
				font-family: Microsoft YaHei;
				color: #ffffff;
			}
		}
	}

	.right_box {
		// height: 62vh;
		flex: 1;
	}

	.right-top {
		flex: 1;
		padding: 20px 0 15px;
		border-bottom: 1px dashed rgba(48, 219, 230, 0.25);

		.monitor1 {
			flex: 1;
		}

		.monitor-ech {
			width: 100%;
			height: 68%;
		}
	}

	.right-middle {
		flex: 1;
		padding: 20px 0 15px;
		border-bottom: 1px dashed rgba(48, 219, 230, 0.25);

		.monitor2 {
			margin-top: 10px;
			height: calc(100% - 45px);

			.monitor-ech1 {
				height: 100%;
				flex: 5;
			}

			.monitor-box {
				flex: 4;
				height: 100%;
				background: rgba(31, 73, 135, 0.25);
				border: 1px solid rgba(35, 104, 255, 0.25);
				padding: 10px 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.zs {
					width: 5px;
					height: 5px;
					background: rgba(35, 104, 255, 0.3);
				}

				.zs1 {
					top: -3px;
					left: -3px;
				}

				.zs2 {
					top: -3px;
					right: -3px;
				}

				.zs3 {
					bottom: -3px;
					left: -3px;
				}

				.zs4 {
					bottom: -3px;
					right: -3px;
				}

				p {
					font-size: 16px;
					font-family: Microsoft YaHei;
					color: #ffffff;
				}

				ul {
					// margin-top: 5px;

					li {
						width: 50%;
						// margin-bottom: 5px;
						margin-top: 10px;

						p:nth-child(1) {
							font-size: 18px;
							font-family: Microsoft YaHei;
							color: #fdef06;

							span {
								font-size: 14px;
								color: #0eceff;
							}
						}

						p:nth-child(2) {
							font-size: 12px;
							font-family: Microsoft YaHei;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.right-btm {
		flex: 1;
		padding: 20px 0 0px;
		display: flex;
		flex-direction: column;

		.monitor3 {
			// height: calc(100% - 45px);
			flex: 1;
			height: 0;

			.monitor-ech2 {
				height: 100%;
				flex: 4;
			}

			.monitor-box1 {
				flex: 4;
				height: 100%;
				display: flex;
				flex-direction: column;

				p {
					font-size: 14px;
					font-family: Microsoft YaHei;
					color: #ffffff;
					display: flex;
					align-items: center;
					margin: 10px 0px 0 0px;

					img {
						width: 18px;
						height: 18px;
						margin-right: 10px;
					}
				}

				ul {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					li {
						height: 28px;
						background: rgba(31, 73, 135, 0.25);
						border: 1px solid rgba(35, 104, 255, 0.25);
						padding: 5px 20px;
						margin-top: 10px;

						.zs {
							width: 5px;
							height: 5px;
							background: rgba(35, 104, 255, 0.3);
						}

						.zs1 {
							top: -3px;
							left: -3px;
						}

						.zs2 {
							top: -3px;
							right: -3px;
						}

						.zs3 {
							bottom: -3px;
							left: -3px;
						}

						.zs4 {
							bottom: -3px;
							right: -3px;
						}

						p {
							font-size: 12px;
							font-family: Microsoft YaHei;
							color: #0eceff;
							margin: 0;

							span {
								font-size: 16px;
								color: #fdef06;
								margin-right: 5px;
							}
						}
					}
				}
			}
		}

		.same-title2 {

			// margin-top: 10px;
			.same-con {
				height: 24px;
				background: #1f4987;
				border: 1px solid rgba(35, 104, 255, 0.25);
				border-radius: 12px;
				font-size: 12px;
				font-family: Microsoft YaHei;
				color: #ffffff;
				line-height: 20px;
				padding: 0 10px;
				text-align: center;

				span {
					font-size: 16px;
					color: #0eceff;
				}
			}
		}
	}

	.same-title {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #ffffff;
	}

	.same-title1 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		color: #9ee9ff;

		span:nth-child(1) {
			font-size: 26px;
			// font-family: Microsoft YaHei;
			color: #0eceff;
			margin-left: 5px;
		}

		span:nth-child(2) {
			font-size: 14px;
			// font-family: Microsoft YaHei;
			color: #edae5d;
			margin-left: 5px;
		}
	}
}
</style>

<style lang="less">
.con-right {
	display: flex;
	flex-direction: column;

	#echarts6 {
		rect.highcharts-point {
			width: 0;
		}
	}

	#echarts7 {
		rect.highcharts-point {
			width: 0;
		}
	}
}
</style>
